<template>
  <div>
    <el-dialog
      width="80%"
      top="40px"
      title="热销详情"
      :visible.sync="dialogTableVisible"
    >
      <el-card
        shadow="naver"
        style="margin-bottom: 20px; margin-top: -20px"
        class="box-card3"
      >
        <div slot="header" class="clearfix">
          <span>条件查询</span>
        </div>
        <div class="text item search">
          <el-col :span="4"
            ><el-input
              v-model="goodsName"
              placeholder="商品名称/模糊查询"
            ></el-input
          ></el-col>
          <el-col :span="3"
            ><el-input v-model="goodsNumber" placeholder="商品货号"></el-input
          ></el-col>
          <el-col :span="3">
            <el-select v-model="brandId" placeholder="请选择品牌">
              <el-option
                label="东易日盛家居装饰"
                value="1329320162080423937"
              ></el-option>
              <el-option
                label="有家良品"
                value="1328952247757930497"
              ></el-option>
              <el-option
                label="简野(JIANYE)"
                value="1328880034681815042"
              ></el-option>
              <el-option
                label="家乐名品(JLVP)"
                value="1328964991345328130"
              ></el-option>
              <el-option
                label="雷蛇照明"
                value="1328990701308968962"
              ></el-option>
              <el-option
                label="东易日盛"
                value="1328988221644832769"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="shangjiaStatus" placeholder="请选择上架状态">
              <el-option label="上架" :value="0"></el-option>
              <el-option label="未上架" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="shenheStatus" placeholder="请选择审核状态">
              <el-option label="审核" :value="0"></el-option>
              <el-option label="未审核" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col style="margin-top: 5px" :span="3">
            <el-button type="primary" size="small" @click="resetting" plain
              >重置</el-button
            >
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
          </el-col>
        </div>
      </el-card>

      <el-table style="height: 600px; overflow: auto" :data="gridData" border>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="100"
        ></el-table-column>
        <el-table-column align="center" property="" label="选择" width="200">
          <template slot-scope="scope">
            <el-radio
              @change="choice(scope.row)"
              :label="scope.row.id"
              v-model="goodsId"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property=""
          label="商品图片"
          width="200"
        >
          <template slot-scope="scope">
            <img
              style="width: 150px; height: 150px"
              :src="scope.row.pic"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property="name"
          label="商品名称"
          width="500"
        >
          <template slot-scope="scope">
            <p>名称: {{ scope.row.name }}</p>
            <p>品牌: {{ scope.row.brandName }}</p>
            <p>{{ scope.row.detailTitle }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property=""
          label="商品价格"
          width="200"
        >
          <template slot-scope="scope">
            <p>原价: {{ scope.row.price }}</p>
            <p>现价: {{ scope.row.originalPrice }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property="productCategoryName"
          label="商品类别"
        ></el-table-column>
        <el-table-column
          align="center"
          property="weight"
          label="商品重量"
        ></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          style="margin-top: 10px; margin-bottom: -20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="3"
          layout="sizes, prev, pager, next"
          :total="totalnumber"
        >
        </el-pagination>
        {{ hotShow }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import marketingApi from "@/api/marketing/index";
export default {
  components: {},

  data() {
    return {
      start: 1,
      limit: 3,
      totalnumber: "",
      gridData: [],
      goodsName: "",
      goodsNumber: "",
      brandId: "",
      shangjiaStatus: "",
      shenheStatus: "",
      goodsId: "",
      dialogTableVisible:'',
    };
  },
  props: ["hotShow"],
  created() {
    this.dialogTableVisible = hotShow;
  },

  mounted() {
    this.getProduct();
  },

  methods: {
    // 选择对应商品
    choice(item) {
      console.log(item);
      this.goodsData = item;
      this.originalPrice = item.price;
      this.goodsId = item.id;
      this.orderNum = 1;
      this.dialogTableVisible1 = true;
    },
    // 重置
    resetting() {
      this.brandId = this.goodsName = this.goodsNumber = this.shangjiaStatus = this.shenheStatus =
        "";
      this.start = 1;
      this.limit = 3;
      this.getProduct();
    },
    // 搜索
    search() {
      this.getProduct();
    },
    getProduct() {
      // 获取产品列表
      marketingApi
        .productsByPage(this.start, this.limit, {
          brandId: this.brandId,
          name: this.goodsName,
          productSn: this.goodsNumber,
          publishStatus: this.shangjiaStatus,
          verifyStatus: this.shenheStatus,
        })
        .then((res) => {
          console.log(res);
          this.gridData = res.data.rows;
          this.totalnumber = res.data.total;
        });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.getProduct();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.getProduct();
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
</style>